<template>
  <cj-popup v-model="showInvoice" position="bottom" round :close-on-click-overlay="false" @closed="clickCloseModal">
    <div class="c-ph24 c-pv24">
      <div class="c-flex-row c-aligni-center c-pv20">
        <span class="c-fs28 c-flex-grow1 c-w0 c-textAlign-c">发票</span>
        <span class="c-fs20 iconfont c-fc-gray" @click="clickCloseModal">&#xe61b;</span>
      </div>
      <div class="c-pb80 c-contexty-scroll c-maxh720">
        <div class="c-flex-row c-aligni-center c-justify-sb c-bd-b1 c-pv30 c-fs26">
          <div class="c-fc-gray">
            是否开发票
          </div>
          <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1 c-justify-end">
            <div class="c-mr20" @click="changeOpenInvoice('PERSON')">
              <span class="iconfont c-fs28" :class="type != 'NONE' ? 'theme-fc' : 'fc-A6A6A6'" v-html="type != 'NONE' ? '&#xe6b1;' : '&#xe692;'"></span>
              开发票
            </div>
            <div @click="changeOpenInvoice('NONE')">
              <span class="iconfont c-fs28" :class="type == 'NONE' ? 'theme-fc' : 'fc-A6A6A6'" v-html="type == 'NONE' ? '&#xe6b1;' : '&#xe692;'"></span>
              不开发票
            </div>
          </div>
        </div>
        <div v-show="type != 'NONE'" class="c-flex-row c-aligni-center c-justify-s c-bd-b1 c-pv30 c-fs24">
          <div class="c-fc-gray">
            发票抬头
          </div>
          <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1 c-justify-end">
            <div class="c-mr20" @click="changeOpenInvoice('PERSON')">
              <span class="iconfont c-fs28" :class="type == 'PERSON' ? 'theme-fc' : 'fc-A6A6A6'" v-html="type == 'PERSON' ? '&#xe6b1;' : '&#xe692;'"></span>
              个人
            </div>
            <div @click="changeOpenInvoice('COMPANY')">
              <span class="iconfont c-fs28" :class="type == 'COMPANY' ? 'theme-fc' : 'fc-A6A6A6'" v-html="type == 'COMPANY' ? '&#xe6b1;' : '&#xe692;'"></span>
              企业
            </div>
          </div>
        </div>
        <div v-show="type != 'NONE'" class="c-flex-row c-aligni-center c-justify-sb c-bd-b1 c-pv30 c-fs24">
          <div class="c-fc-gray">
            发票类型
          </div>
          <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1 c-justify-end">
            <div class="c-mr20" @click="changeInvoiceMode(3)">
              <span class="iconfont c-fs28" :class="invoiceType == 3 ? 'theme-fc' : 'fc-A6A6A6'" v-html="invoiceType == 3 ? '&#xe6b1;' : '&#xe692;'"></span>
              电子普通发票
            </div>
            <div v-show="type == 'COMPANY'" @click="changeInvoiceMode(4)">
              <span class="iconfont c-fs28" :class="invoiceType == 4 ? 'theme-fc' : 'fc-A6A6A6'" v-html="invoiceType == 4 ? '&#xe6b1;' : '&#xe692;'"></span>
              专票
            </div>
          </div>
        </div>
        <div v-show="type != 'NONE'">
          <div id="invoiceName" class="c-fs26 c-pv30 c-bd-b1 c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fc-gray c-mr24"><span class="c-fc-red c-mr2">*</span>发票抬头</div>
            <input v-model="invoiceName" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" :placeholder='type == "COMPANY" ? "请填写企业名称" : "请填写个人名称"' />
          </div>
          <div v-show="type == 'COMPANY'" id="invoiceCode" class="c-fs26 c-pv30 c-bd-b1 c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fc-gray c-mr24"><span class="c-fc-red c-mr2">*</span>企业税号</div>
            <input v-model="invoiceCode" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写企业税号" />
          </div>
          <div id="invoiceMail" class="c-fs26 c-pv30 c-bd-b1 c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fc-gray c-mr24"><span class="c-fc-red c-mr2">*</span>收票邮箱</div>
            <input v-model="invoiceMail" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写接收电子发票的邮箱" />
          </div>
          <div id="invoiceMobile" class="c-fs26 c-pv30 c-bd-b1 c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fc-gray c-mr24"><span class="c-fc-red c-mr2">*</span>收票手机号</div>
            <input v-model="invoiceMobile" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写接收电子发票的手机号" />
          </div>
        </div>
        <div v-show="isShowMoreCompany">
          <div v-show="type == 'COMPANY'" id="registeredAddress" class="c-fs26 c-pv30 c-flex-row c-aligni-center c-justify-sb c-bd-b1">
            <div class="c-fc-gray c-mr24">注册地址</div>
            <input v-model="registeredAddress" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写企业的注册地址" />
          </div>
          <div v-show="type == 'COMPANY'" id="registeredMobile" class="c-fs26 c-pv30 c-flex-row c-aligni-center c-justify-sb c-bd-b1">
            <div class="c-fc-gray c-mr24">注册电话</div>
            <input v-model="registeredMobile" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写企业的电话" />
          </div>
          <div v-show="type == 'COMPANY'" id="accountBank" class="c-fs26 c-pv30 c-flex-row c-aligni-center c-justify-sb c-bd-b1">
            <div class="c-fc-gray c-mr24">企业开户行</div>
            <input v-model="accountBank" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填写企业开户银行" />
          </div>
          <div v-show="type == 'COMPANY'" id="accountNo" class="c-fs26 c-pv30 c-flex-row c-aligni-center c-justify-sb c-bd-b1">
            <div class="c-fc-gray c-mr24">银行账号</div>
            <input v-model="accountNo" type="text" class="c-fs26 c-fc-xblack c-w0 c-flex-grow1 c-textAlign-r c-bd0" placeholder="请填企业的银行账号" />
          </div>
        </div>
        <div v-show="type == 'COMPANY'" class="c-fs22 c-pv10 c-flex-row c-flex-center c-fc-xblack c-ww180 c-br26 bgF8F8F8 c-br28 c-m-0auto c-mt30" @click="isShowMoreCompany = !isShowMoreCompany">
          <div class="c-lh32">{{ isShowMoreCompany ? '收起' : '更多选填项' }}<span class="c-fs20 iconfont c-ml10 c-fc-xblack c-fw-b" v-html="isShowMoreCompany ? '&#xe6ab;' : '&#xe6a9;'"></span></div>
        </div>
      </div>
      <div class="c-pf c-p-l0 c-p-b0 c-maxw640 c-pv10 c-ph24 c-w100 c-bg-white">
        <div class="c-fs28 c-fc-white c-br36 c-lh34 c-pv16 theme-bg c-textAlign-c" @click="clickOpenInvoice">确定</div>
      </div>
    </div>
  </cj-popup>
</template>
<script>
import { utilJs } from "@/utils/common.js"
let curInvoiceState = 'NONE';
export default {
  name: 'InvoiceModal',
  components: {},
  props: {
    showInvoice: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: 'NONE', // 是否开票 "none" 不开票 "PERSON" 个人 "COMPANY" 企业
      invoiceType: 3, // 开票类型 3 电子发票 4 专票
      invoiceName: '', // 发票抬头
      invoiceCode: '', // 纳税人识别码/企业税号
      invoiceMail: '', // 收票邮箱
      invoiceMobile: '', // 收票手机号
      registeredAddress: '', // 注册地址
      registeredMobile: '', // 注册电话
      accountBank: '', // 企业开户行
      accountNo: '', // 银行账号
      isShowMoreCompany: false // 是否展开企业更多选填项
    };
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // 初始化开票方法
    public_initData(info) {
      this.type = info && info.invoiceName ? (!info.invoiceCode ? 'PERSON' : 'COMPANY') : 'NONE'; // 企业有税号
      curInvoiceState = this.type;
      this.invoiceType = info && info.invoiceType ? info.invoiceType : 3;
      this.invoiceName = info && info.invoiceName ? info.invoiceName : '';
      this.invoiceCode = info && info.invoiceCode ? info.invoiceCode : '';
      this.invoiceMail = info && info.invoiceMail ? info.invoiceMail : ''; // 收票邮箱
      this.invoiceMobile = info && info.invoiceMobile ? info.invoiceMobile : ''; // 收票手机号
      this.registeredAddress = info && info.registeredAddress ? info.registeredAddress : ''; // 注册地址
      this.registeredMobile = info && info.registeredMobile ? info.registeredMobile : ''; // 注册电话
      this.accountBank = info && info.accountBank ? info.accountBank : ''; // 企业开户行
      this.accountNo = info && info.accountNo ? info.accountNo : ''; // 银行账号
    },
    // 切换开票方式
    changeInvoiceMode(from) {
      this.invoiceType = from;
    },
    // 关闭发票弹窗
    clickCloseModal() {
      this.$emit('clickCloseModal');
      this.type = curInvoiceState;
    },
    // 是否开发票
    changeOpenInvoice(name) {
      this.type = name;
      this.invoiceType = 3;
      if (this.type == 'PERSON') {
        this.invoiceCode = ''; // 企业税号
        this.registeredAddress = ''; // 注册地址
        this.registeredMobile = ''; // 注册电话
        this.accountBank = ''; // 企业开户行
        this.accountNo = ''; // 银行账号
      }
    },
    // 表单错误提示定位
    domScrollIntoView(id) {
      if (!id) return;
      this.$nextTick(() => {
        const dom = document.getElementById(id);
        dom && dom.scrollIntoView();
      });
    },
    // 开发票
    clickOpenInvoice() {
      if ((this.type == 'COMPANY' && !this.invoiceCode) || this.type != 'NONE' && (!this.invoiceName || !this.invoiceMail || !this.invoiceMobile)) {
        let msg = '';
        let id = '';
        if (!this.invoiceName) {
          msg = this.type == 'PERSON' ? '个人名称' : '企业名称';
          id = 'invoiceName';
        } else if (this.type == 'COMPANY' && !this.invoiceCode) {
          msg = '企业税号';
          id = 'invoiceCode';
        } else if (!this.invoiceMail) {
          msg = '收票邮箱';
          id = 'invoiceMail';
        } else if (!this.invoiceMobile) {
          msg = '收票手机号';
          id = 'invoiceMobile';
        }
        this.$showCjToast({
          text: '请填写' + msg,
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView(id);
        return;
      }
      if (this.invoiceName && this.invoiceName.length > 50) {
        this.$showCjToast({
          text: '发票抬头长度不超过50',
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView('invoiceName');
        return;
      }
      if (this.invoiceMail && this.invoiceMail.length > 50) {
        this.$showCjToast({
          text: '接收邮箱长度不超过50',
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView('invoiceMail');
        return;
      }
      if (this.invoiceMobile && this.invoiceMobile.length > 14) {
        this.$showCjToast({
          text: '接收发票的手机号长度不超过14',
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView('invoiceMobile');
        return;
      }
      if (this.invoiceMail && !utilJs.isEmail(this.invoiceMail)) {
        this.$showCjToast({
          text: '接收发票的邮箱输入格式不正确',
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView('invoiceMail');
        return;
      }
      if (this.invoiceMobile && !utilJs.isPhoneNumber(this.invoiceMobile)) {
        this.$showCjToast({
          text: '接收发票的手机号输入格式不正确',
          type: 'warn',
          time: 1000
        });
        this.domScrollIntoView('invoiceMobile');
        return;
      }
      if (this.type == 'COMPANY') {
        if (
          (this.invoiceCode && this.invoiceCode.length > 50) ||
          (this.registeredAddress && this.registeredAddress.length > 50) ||
          (this.registeredMobile && this.registeredMobile.length > 50) ||
          (this.accountBank && this.accountBank.length > 50) ||
          (this.accountNo && this.accountNo.length > 50)
        ) {
          let msg = '';
          let id = '';
          if (this.invoiceCode && this.invoiceCode.length > 50) {
            msg = '企业税号';
            id = 'invoiceCode';
          } else if (this.registeredAddress && this.registeredAddress.length > 50) {
            msg = '注册地址';
            id = 'registeredAddress';
          } else if (this.registeredMobile && this.registeredMobile.length > 50) {
            msg = '注册电话';
            id = 'registeredMobile';
          } else if (this.accountBank && this.accountBank.length > 50) {
            msg = '企业开户行';
            id = 'accountBank';
          } else {
            msg = '银行账号';
            id = 'accountNo';
          }
          this.$showCjToast({
            text: msg + '长度不超过50',
            type: 'warn',
            time: 1000
          });
          this.domScrollIntoView(id);
          return;
        }
      }
      let data = {
        invoiceType: this.invoiceType,
        invoiceTitle: this.type == 'PERSON' ? '个人' : '企业', // '发票抬头类型，文本：个人、企业',
        invoiceName: this.invoiceName || '',
        invoiceCode: this.invoiceCode || '',
        invoiceMail: this.invoiceMail || '',
        invoiceMobile: this.invoiceMobile || '',
        registeredAddress: this.registeredAddress || '',
        registeredMobile: this.registeredMobile || '',
        accountBank: this.accountBank || '',
        accountNo: this.accountNo || ''
      };
      if (this.type == "NONE") data = null; // 选择不开票 数据传null
      console.log(data);
      this.$emit('getInvoice', data);
    }
  }
};
</script>

<style scoped>
.fc-A6A6A6 {
  color: #a6a6a6;
}
.bgF8F8F8 {
  background-color: #f8f8f8;
}
</style>
